<template>
  <div>
    <div>我是子组件 -- {{ num }}</div>
    <div>标题：{{ title }}</div>
    <div>用户：{{ user.id }} -- {{ user.name }}</div>
  </div>
</template>

<script>
export default {
  // 通过props配置来接受父传过来的属性
  // props: [属性名] | {}
  // + 数组：此组件非公用组件一般多用此方案
  // + 对象：一般多定义为公用组件,此方案可以设置默认值和属性类型验证
  // props: ['num', 'title', 'user'],
  props: {
    // 它能定义的类型为js的类型，注意点它的类型首字母大写
    // num属性只能为数字
    // num: Number
    // num属性Number和String两者都可
    // num: [Number, String]
    // num:{
    //   type:Number
    // }
    // 计数器
    num: {
      type: Number,
      // num属性它必须要有
      required: true,
      // 自定义验证 返回true验证通过，false不通过
      validator: (value) => {
        if (typeof value != 'number') return false
        // throw new Error('num属性最大值为102')
        return value < 103
      }
    },
    title: {
      type: String,
      // 值 | () => 值
      // ()=>值，什么场景都能使用，多用于复杂类型的默认值设置，而且复杂类型只能用此方案来设置默认值
      // 值 基础类型
      default: '默认值'
    },
    user: {
      type: Object,
      default: () => ({ id: 0, name: '默认' })
    }
  },

  mounted() {
    // 在js中调用props数据
    // console.log(this.num)
  }
}
</script>

<style lang="scss" scoped></style>
